<template>
	<view class="content">
		<view class="introduction" v-for="teacher in teachers" :key="teacher.id">
			<view class="avatar">
				<img :src="teacher.avatarImg" alt="" style="width: 200rpx; height: 200rpx;" />
			</view>
			<view class="textContent">
				{{teacher.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teachers: [

				]

			}
		},
		methods: {
			getJwtToken() {
				try {
					return wx.getStorageSync('jwt_token');
				} catch (e) {
					// 处理获取令牌失败的逻辑，比如返回 null 或抛出错误  
					return null;
				}
			},
			sendRequestWithToken(url, method) {
				const token = this.getJwtToken();
				if (token) {
					wx.request({
						url: url,
						method: method,
						header: {
							'token': token
						},
						success: (res) => {
							if (res.data.code === 1 && res.data.msg === 'success') {
								this.teachers = res.data.data;
							} else if (res.data.code === 0) {
								uni.showToast({
									title: '登录信息有误',
									icon: null
								});
								this.goPage(7);
								console.error('未登录', res.data.data);
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '网络请求失败',
								icon: 'none'
							});
							console.error('请求失败', error);
						}
					});
				} else {

				}
			},
			getuserName() {
				try {
					return wx.getStorageSync('user_name');
				} catch (e) {
					// 处理获取令牌失败的逻辑，比如返回 null 或抛出错误  
					return null;
				}
			},
			showIntroduction() {
				const username = this.getuserName();
				const url = `http://localhost:8080/patra/renjiao/${username}`;
				const method = 'GET';
				this.sendRequestWithToken(url, method)
			},
			onLoad() {
				this.showIntroduction();
			}

		}
	}
	
</script>

<style>
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		flex-direction: column;
		padding-top: 30rpx;
	}

	.introduction {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: auto;
		flex-direction: column;
		background-color: #a2a2a2;
		margin-top: 30rpx;
		border-radius: 30rpx;
	}

	.avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: 200rpx;
	}

	.textContent {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: auto;
		background-color: aliceblue;
		font-size: 25rpx;
		font-family: AliMamaShuHei;
		border-radius: 30rpx;
		padding: 10rpx;
	}
</style>